<template>
    <div class="base-search-data-view hljs" :class="mainClass"
         :style="{ fontSize: Optional.ofNullable(jsonFontSize).orElse(16) + 'px' }">
        <base-view v-if="defaultView === ViewTypeEnum.BASE" :value="current.result"/>
        <json-view v-else-if="defaultView === ViewTypeEnum.JSON" :value="current.result"/>
        <table-viewer v-else-if="defaultView === ViewTypeEnum.TABLE" :data="current.result" :index="current.index"/>
        <monaco-view v-else-if="defaultView === ViewTypeEnum.EDITOR" :value="current.result" :height="height"/>
        <json-tree-view v-else-if="defaultView === ViewTypeEnum.JSON_TREE" :value="current.result"/>
    </div>
</template>
<script lang="ts">
import {computed, defineComponent} from "vue";
import {mapState} from "pinia";
import {useWindowSize} from "@vueuse/core";

import Optional from "@/utils/Optional";
import ViewTypeEnum from "@/enumeration/ViewTypeEnum";
import useGlobalSettingStore from "@/store/setting/GlobalSettingStore";
import {useBaseSearchSettingStore} from "@/store/setting/BaseSearchSettingStore";
import {current} from "@/store/components/BaseSearchStore";
import TableViewer from "@/components/view/TableViewer/index.vue";
import JsonTreeView from "@/components/view/JsonTreeView/index.vue";
import JsonView from "@/components/view/JsonView/index.vue";
import BaseView from "@/components/view/BaseView/index.vue";
import MonacoView from "@/components/view/MonacoView/index.vue";


export default defineComponent({
    name: 'base-search-data-view',
    components: {MonacoView, BaseView, JsonView, JsonTreeView, TableViewer},
    data: () => ({
        Optional,
        ViewTypeEnum
    }),
    computed: {
        ...mapState(useGlobalSettingStore, ['jsonFontSize', 'jsonWrap']),
        ...mapState(useBaseSearchSettingStore, ['defaultView']),
        mainClass() {
            let classItem = new Array<string>();
            if (this.defaultView === ViewTypeEnum.TABLE) {
                classItem.push('table-viewer-show')
            }
            if (this.jsonWrap) {
                classItem.push('json-wrap')
            }
            return classItem.join(' ')
        }
    },
    setup() {
        const size = useWindowSize();
        const height = computed(() => (size.height.value - 120) + 'px');

        return {
            height, current
        }
    },
});
</script>
<style lang="less">
.base-search-data-view {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    position: relative;
    border-left: 1px solid var(--color-border-2);
    border-right: 1px solid var(--color-border-2);
    border-top: 1px solid var(--color-border-2);
    overflow-x: auto;

    &.json-wrap {
        .CompCssDJsonViewTree {
            .wjv-line {
                flex-flow: wrap;
            }
        }

        pre.hljs {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
            word-break: break-all;
        }
    }

    .json-view-copy {
        position: absolute;
        top: 0;
        right: 15px;
    }

    &.table-viewer-show {
        height: calc(100vh - 108px);
        overflow: hidden;
        padding: 0;
        border: 0;
    }
}
</style>
